---
import '../styles/global.css';
import '../styles/transitions.css';
import { ViewTransitions } from 'astro:transitions';

export interface Props {
  title: string;
  description?: string;
}

const { 
  title, 
  description = "最好用的.net开源工作流框架,最好用的.NET开源权限管理框架"
} = Astro.props;
---

<!doctype html>
<html lang="zh-CN" x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))" :class="{ 'dark': darkMode }">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <title>{title}</title>
    <ViewTransitions />
  </head>
  <body class="antialiased bg-white dark:bg-secondary-950 text-secondary-900 dark:text-secondary-100 transition-colors duration-300">
    <div id="page-wrapper" class="page-transition-wrapper">
      <slot />
    </div>
    <script>
      // 检查用户偏好
      if (localStorage.getItem('darkMode') === null) {
        // 检查系统偏好
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          localStorage.setItem('darkMode', 'true');
          document.documentElement.classList.add('dark');
        } else {
          localStorage.setItem('darkMode', 'false');
        }
      }

      // 处理页面过渡
      document.addEventListener('astro:page-load', () => {
        // 这在初始页面加载和每次导航后运行
        const pageWrapper = document.getElementById('page-wrapper');
        if (pageWrapper) {
          pageWrapper.classList.add('page-loaded');
        }
      });

      document.addEventListener('astro:before-swap', () => {
        // 这在新页面内容被替换之前运行
        const pageWrapper = document.getElementById('page-wrapper');
        if (pageWrapper) {
          pageWrapper.classList.remove('page-loaded');
        }
      });

      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?93a7b9a145222f9b7109d643a0c58f8d";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <script src="../scripts/transitions.js"></script>
  </body>
</html>
